<template>
  <div class="home-root">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider
        v-model:collapsed="collapsed"
        :trigger="null"
        collapsible
        style="position: fixed; top: 0; left: 0; height: 100vh; z-index: 999"
      >
        <div class="logo">
          <img
            height="24"
            src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/logo.png"
          />
          <div v-show="!collapsed">秒优购后台管理</div>
        </div>
        <div style="height: 90vh; overflow: hidden auto" class="test-1">
          <a-menu
            theme="dark"
            mode="inline"
            :openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            @openChange="onOpenChange"
          >
            <a-sub-menu :key="item.menuRouter" v-for="item in menuList">
              <template #title>
                <span
                  ><IconFont :type="item.menuIcon" /><span>{{
                    item.menuName
                  }}</span></span
                >
              </template>
              <a-menu-item
                v-for="menu in item.children"
                :key="menu.menuRouter.split('/')[1]"
                @click="handelClickLink(menu.menuRouter)"
                ><IconFont :type="menu.menuIcon" />{{
                  menu.menuName
                }}</a-menu-item
              >
            </a-sub-menu>
          </a-menu>
        </div>
      </a-layout-sider>
      <a-layout
        :class="[collapsed ? 'header-margin-collapsed' : 'header-margin']"
      >
        <a-layout-header
          style="
            background: #fff;
            padding: 0;
            display: flex;
            justify-content: space-between;
            box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
            z-index: 9;
          "
        >
          <div class="header-left">
            <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined
              v-else
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
          </div>
          <div class="header-right">
            <a-dropdown>
              <a-avatar size="large" shape="square">
                {{ userInfo.adminName }}
              </a-avatar>

              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a @click="loginOut()">退出</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <span>{{ roles }}</span>
          </div>
        </a-layout-header>
        <a-layout-content :style="{ overflow: 'initial' }">
          <router-view v-slot="{ Component }">
            <transition
              name="custom-classes-transition"
              enter-active-class="animate__animated animate__fadeIn"
            >
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
          <a-layout-footer style="text-align: center">
            ©Second you buy of Admin, powered by 苗文青 2021.
          </a-layout-footer>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import { notification } from "ant-design-vue";
import Base64 from "base-64";
import {
  createFromIconfontCN,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";
const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2349986_w0la5zy5hej.js",
  extraCommonProps: {
    style: {
      fontSize: "18px",
      fontWeight: "800",
    },
  },
});
export default {
  components: {
    createFromIconfontCN,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    IconFont,
  },
  created() {
    this.getPath();
  },
  mounted() {
    this.initAdmin();
  },
  data() {
    return {
      rootSubmenuKeys: [
        "Index",
        "Store",
        "Product",
        "Order",
        "Customer",
        "Marketing",
        "Authority",
        "Message",
        "Notification",
      ],
      openKeys: [],
      selectedKeys: [],
      collapsed: false,
      menuList: [], //菜单列表
      userInfo: {},
      roles: [],
    };
  },

  methods: {
    //初始化用户数据
    initAdmin() {
      let token = sessionStorage.getItem("access-token");
      let userString = token.split(".")[1];
      let dat = JSON.parse(Base64.decode(userString));
      let adminInfo = JSON.parse(dat.data);
      this.roles = adminInfo.roles;

      this.$axios.get("/admin/adminInfo").then((res) => {
        if (res.data.code == 2000) {
          this.userInfo = res.data.data; 
          if (null != this.userInfo.storeId && this.userInfo.adminType == 0) {
            this.$store.commit(
              "init",
              "ws://127.0.0.1:8888/common/webSocket/1/" +
                this.userInfo.adminId +
                "/" +
                this.userInfo.storeId
            );
            if (this.$route.path == "/home/Index/ShopIndex") {
              this.$router.push("/home/Index/shop");
            }
          } else {
            if (this.$route.path == "/home/Index/ShopIndex") {
              this.$router.push("/home/Index/platform");
            }
          }
          let userInfo = JSON.stringify(res.data.data);
          sessionStorage.setItem(
            "userInfo",
            Base64.encode(encodeURIComponent(userInfo))
          );
        } else {
          notification["error"]({
            message: "权限不足",
            description: "请联系管理员 赋予您相关权限",
          });
          this.loginOut();
        }
      });

      this.getData();
    },

    //获取数据
    getData() {
      this.$axios.get("/admin/menu/allById").then((res) => {
        this.menuList = res.data.data;
      });
    },
    // 用户只打开父菜单
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );

      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    //获取路由
    getPath() {
      const path = this.$route.path;
      this.openKeys[0] = path.split("/")[2];
      this.selectedKeys[0] = path.split("/")[3];
    },

    //菜单路由跳转
    handelClickLink(path) {
      this.$router.push("/home/" + path);
    },
    // 退出 登录
    loginOut() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>


<style lang="less" scoped>
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  background: #535353;
}

.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

  background: #263844;
}

#components-layout-demo-custom-trigger {
  height: 100vh;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.header-margin-collapsed {
  margin-left: 80px;
}
.header-margin {
  margin-left: 200px;
}

.header-left {
  display: flex;
  align-items: center;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
#components-layout-demo-custom-trigger .logo > div {
  margin: 0 5px;
}

.header-right {
  padding-right: 20px;
  display: flex;
  align-items: center;
}
.header-right span {
  margin-left: 20px;
}
</style>